<template>
  <view class="page">

    <!-- 表单 -->
    <view class="form-wrapper">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="160rpx">


        <uni-forms-item label="新密码" name="newPassword" required>
          <uni-easyinput
            type="password"
            v-model="formData.newPassword"
            placeholder="请输入新密码"
          />
        </uni-forms-item>

        <uni-forms-item label="确认密码" name="confirmPassword" required>
          <uni-easyinput
            type="password"
            v-model="formData.confirmPassword"
            placeholder="请再次输入新密码"
          />
        </uni-forms-item>
      </uni-forms>

      <button class="btn-submit" @click="submit">提交修改</button>
    </view>
  </view>
</template>

<script>
export default {
data() {
  return {
    formData: {
      newPassword: '',
      confirmPassword: ''
    },
    rules: {
      newPassword: {
        rules: [
          { required: true, errorMessage: '请输入新密码' },
          { minLength: 6, maxLength: 20, errorMessage: '密码长度 6-20 位' }
        ]
      },
      confirmPassword: {
        rules: [
          { required: true, errorMessage: '请再次输入新密码' },
          {
            validateFunction: (_, value, data) => value === data.newPassword,
            errorMessage: '两次密码输入不一致'
          }
        ]
      }
    }
  };
},
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    async submit() {
      try {
        await this.$refs.form.validate();
        const { oldPassword, newPassword } = this.formData;

        // 示例：调用后端接口
        const res = await uni.$http.put('/sys/user/updateSelfPass', {
          "password":newPassword
        });

        uni.showToast({ title: res?.data?.msg || '修改成功', icon: 'success' });
		// 清除缓存
		
		uni.setStorageSync("authorization", null)
        setTimeout(() => uni.reLaunch({ url: '/pages/login/login' }), 1500);
      } catch (err) {
        // 表单校验或接口异常自动提示
      }
    }
	

  }
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-wrapper {
  margin: 40rpx 30rpx;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.btn-submit {
  margin-top: 60rpx;
  width: 100%;
  background-color: #1e90ff;
  color: #ffffff;
  font-size: 32rpx;
  line-height: 90rpx;
  border-radius: 16rpx;
}
</style>